<template>
  <div class="declaration-info">

    <!-- <el-page-header @back="goBack($router)">
      </el-page-header> -->

    <div class="info-banner">
      <!-- <h1>{{ noticeForm.name }}</h1> -->
      <el-row type="flex" :gutter="20" style="width: 100%;">
        <el-col :span="18" class="info-banner-left">
          <div class="title-wrap">
            <h1 class="text-1">{{ info.title }}</h1>
            <!-- <span class="text-2">
              <span class="star" :class="followStatus == 1 ? 'selected' : 'normal'"
                @click="starOperate">
                <svg-icon :icon-class="followStatus == 1 ? 'star-selected' : 'star-normal'"
                  style="font-size: 18px" />{{ followStatus == 1 ? '已关注' : '未关注' }}
              </span>
            </span> -->
          </div>
          <p class="content-desc">
            <!-- <span>发布日期：{{ parseTime(info.startTime, '{y}年{m}月{d}日') }}</span> -->
            <span>来源：浙江省经济和信息化厅</span>
            <span>浏览次数：{{ browserTime }}</span>
          </p>
          <h4>
            申报时间：{{ parseTime(info.startTime) }} 至 {{ parseTime(info.endTime) }}
          </h4>
        </el-col>
        <el-col :span="6" class="info-banner-right">
          <el-tag :type="noticeStatus.color" size="default">{{ noticeStatus.text
          }}</el-tag>
          <h3 v-if="noticeStatus.rest">距离申报结束剩余{{ noticeStatus.rest }}</h3>
        </el-col>
      </el-row>

      <!-- <apply :follow-status="followStatus" :noticeInfo="info"></apply> -->
    </div>
    <div style="margin-top: 12px" class="info-detail-body">
      <el-row :gutter="20">
        <el-col :span="18">

          <el-card shadow="never">
            <div slot="header">
              <span class="info-card-title">概况介绍</span>
            </div>
            <div class="declaration-content">
              <div v-html="info.content"></div>
            </div>

          </el-card>

          <el-card shadow="never">
            <div slot="header">
              <span class="info-card-title">表单清单</span>
            </div>
            <div v-for="item in processList" :key="item.id" class="info-form-list">
              <h3>{{ item.title }}</h3>
              <!-- <el-button type="text" size="default" @click="gotoSubmit">去填报</el-button> -->
              <apply :follow-status="followStatus" :noticeInfo="info" :processInfo="item"></apply>
            </div>
            <span v-if="!processList.length" class="info-card-empty">暂无</span>

          </el-card>
        </el-col>
        <el-col :span="6">

          <el-card shadow="never">
            <div slot="header">
              <span class="info-card-title">附件</span>
            </div>
            <ul v-if="fileList.length" class="info-upload-list">
              <li v-for="(file, index) in fileList" :key="index" class="info-upload-list-item">
                <el-link :href="file.url" :underline="false" target="_blank">
                  <span class="el-icon-document">附件{{ index + 1 }} {{ getFileName(file.name) }}
                  </span>
                </el-link>
              </li>
            </ul>
            <span v-else class="info-card-empty">暂无</span>
          </el-card>

          <el-card shadow="never">
            <div slot="header">
              <span class="info-card-title">联系方式</span>
            </div>
            <div v-if="info.contacts" v-html="info.contacts"></div>
            <span v-else class="info-card-empty">暂无</span>
          </el-card>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, /* reactive,  */computed } from 'vue';
import {
  // setFollowed,
  // getFollowedList,
  updateEnterpriseInfo,
  getNoticeDetail,
  getNoticeProcessList
} from '@/api/enterprise/info';
// import { getFormByDefinitionId } from '@/api/bpm/form';
import { useRoute/* , useStore */ } from '@/utils/vue-const';
import { FOLLOW_STATUS } from '@/utils/enum';
import { getRestTime, parseTime } from '@/utils/dateUtils';
// import { setSessionItem } from '@/utils/global';
// import { decodeFields } from '@/utils/formGenerator';
// import { getHomePathByStore } from '@/utils/user';
// import AttachList from './attach-list.vue';
// import PortalWrap from '@/components/layout/portal-wrap.vue';
// import { isProduction } from '@/config/env';
import Apply from './apply.vue';
// import { NOTICE_FORM_CONFIG_CURRENT } from '../const';

const route = useRoute();
// const store = useStore();
// const uid = store.getters.userId;
const noticeId = route.query?.id;
// 正式环境不需要返回，只有详情。
// const pageFrom = isProduction ? '' : route.query?.pageFrom;
// const { processDefinitionId = '' } = route.query;

// const noticeForm = reactive({ name: '', formId: '' });

const info = ref({ title: '', count: 0, content: '' });
const processList = ref([]);

const followStatus = ref(FOLLOW_STATUS.NO); // 默认未关注

/* const attaches = reactive({
  data: [],
  total: 0,
  loading: false,
  page: {
    pageNo: 1,
    pageSize: 6,
  },
}); */

// 从详情接口中获取 processDefinitionId
// const processDefinitionId = computed(() => info.value.processDefinitionId);
// 浏览次数（每次进来，加一，并同步给后端）
const browserTime = computed(() => (info.value.count || 0) + 1);
const noticeStatus = computed(() => {
  if (!info.value.startTime || !info.value.endTime) {
    return { text: '未知', color: 'info', rest: '' };
  }
  const start = new Date(info.value.startTime).getTime();
  const end = new Date(info.value.endTime).getTime();
  const now = Date.now();
  if (now < start) {
    return { text: '待开始', color: 'warning', rest: getRestTime(end) };
  }
  if (now >= end) {
    return { text: '已结束', color: 'info', rest: '' };
  }
  return { text: '进行中', color: 'default', rest: getRestTime(end) };
});

/* 文件信息 */
const fileList = computed(() => {
  const uploadPath = info.value.uploadPath ? info.value.uploadPath.split(',') : [];
  const uploadFilename = info.value.uploadFilename ? info.value.uploadFilename.split(',') : [];
  return uploadPath.map((url, i) => ({
    url,
    name: uploadFilename[i] ? uploadFilename[i] : url,
  }));
});

function goBack(router) {
  /* const { key, cardType } = route.query;
  const query = {};
  if (pageFrom.includes('declaration-search')) {
    // 搜索页过来
    query.key = key;
  } else if (pageFrom.includes('retrieval-index')) {
    // 申报查询页中“我的关注”
    query.cardType = cardType;
  }
  if (pageFrom) {
    router.replace({
      name: pageFrom,
      query,
    });

  } else {
    // 外部链接过来，回到首页
    router.push({
      path: getHomePathByStore(),
      query,
    });
  } */

  router.go(-1);
}

/* function setFollowStatus(status) {
  setFollowed({ enterpriseId: noticeId, followStatus: status, uid }).then(
    ({ code }) => {
      if (!code) {
        followStatus.value = status;
      }
    },
  );
} */

//点亮操作
/* function starOperate() {
  const status =
    followStatus.value == FOLLOW_STATUS.YES
      ? FOLLOW_STATUS.NO
      : FOLLOW_STATUS.YES; // 1是关注，2是取消关注
  setFollowStatus(status);
} */

/* function attachPagination({ pageNo, pageSize }) {
  attaches.page = { pageNo, pageSize };
  // onSearch();
} */

/* function getFollowedStatus() {
  getFollowedList({ pageNo: 1, pageSize: 1, enterpriseId: noticeId, uid }).then(
    (response) => {
      const { list } = response.data || {};
      followStatus.value =
        list && list[0] ? FOLLOW_STATUS.YES : FOLLOW_STATUS.NO;
    },
  );
} */

/* 获取文件名称 */
function getFileName(name) {
  if (name.lastIndexOf('/') > -1) {
    return name.slice(name.lastIndexOf('/') + 1);
  } else {
    return name;
  }
}

// 填报表单
/* function getFormInfo() {
  // 参数
  getFormByDefinitionId(processDefinitionId.value).then(({ data }) => {
    // 设置值
    if (data) {
      const { formConf, formFields, name, formId } = data;
      setSessionItem(NOTICE_FORM_CONFIG_CURRENT, {
        ...JSON.parse(formConf),
        fields: decodeFields(formFields),
      });
      if (name) {
        noticeForm.name = name;
        noticeForm.formId = formId;
      }
    }
  });
} */

/* 初始化 */
/* 获取通知详情 */
getNoticeDetail({ id: noticeId }).then(({ data }) => {
  info.value = data || {};
  // getFormInfo();
  /* 更新通知的浏览次数 */
  updateEnterpriseInfo({ count: browserTime.value, id: noticeId });
});
// 获取通知流程表单
getNoticeProcessList(noticeId).then(({ data }) => {
  processList.value = data;
});

// getFollowedStatus();
</script>

<style lang="scss" scoped>
@import '@/config/theme/ele-variables.scss';

.declaration-info {

  padding: 20px;
  background-color: #fff;
  font-size: 14px;

  .info-banner {
    // background: #10568a;
    // height: 240px;
    // color: rgba($color: #fff, $alpha: 0.8);

    .layout-portal-wrap-content {
      padding: 20px 0;
      height: 100%;
      display: flex;
      align-items: center;
    }

    button {
      font-size: 18px;
      // background: #169bd5;
      // color: #fff;
      border: none;
      height: 40px;
    }
  }

  .info-banner-right {
    // width: 180px;
    // margin-left: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-left: 1px solid #fff;

    >.el-tag {
      height: 42px;
      line-height: 42px;
      text-align: center;
      font-size: 20px;
      width: 120px;
    }
  }


  .title-wrap {
    // margin: 10px 0;
    display: flex;
    align-items: center;
    // background-color: #fafafa;
    // padding: 16px 20px 0 0;

    .text-1 {
      // color: #fff;
      font-size: 24px;
      font-weight: bold;
      margin: 0;
    }

    .text-2 {
      min-width: 90px;
      margin-left: 10px;
      // color: #169bd5;
      font-size: 16px;
      cursor: pointer;

      .star {
        padding: 5px 10px;
        border-radius: 6px;
      }

      .selected {
        color: $--color-warning;
        border: 1px solid $--color-warning;
      }

      .normal {
        color: $--border-color-light;
        border: 1px solid $--border-color-light;
        // background: #f7f7f7;
      }
    }
  }

  .content-desc {
    // text-align: center;
    // margin: 16px 0 32px;
    color: #999999;

    span {
      margin-right: 20px;
    }
  }

  .info-detail-body {
    margin-top: 12px;

    .layout-portal-wrap-content {
      >* {
        margin-top: 20px;
      }
    }

    .el-card+.el-card {
      margin-top: 20px;
    }
  }

  :deep(.el-card__header) {
    padding: 14px 15px;
    // min-height: 40px;
  }

  :deep(.el-card__body) {
    padding: 15px 20px 20px 20px;
  }

  .info-card-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #101010;

    &:before {
      width: 5px;
      height: 22px;
      background: #007aff;
      display: inline-block;
      content: "";
      margin-right: 12px;
      border-radius: 2px;
    }
  }

  .info-form-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;

    h3 {
      margin: 0;
    }
  }

  .info-card-empty {
    color: #999;
  }

  .declaration-content {
    padding: 4px 20px;
    background-color: #fafafa;

    h4 {
      font-size: 18px;
      color: $--color-danger;
      text-align: center;
      margin: 0 0 20px;
    }
  }

  .info-upload-list {
    padding: 0;
  }

  .info-upload-list-item {
    border-bottom: 1px solid #e4e7ed;
    // line-height: 2;
    list-style: none;
    margin-bottom: 10px;

    span {
      white-space: normal;
      word-break: break-all;
      line-height: 1.25;
    }
  }
}
</style>
